import styled from 'styled-components'

export const RightTopWrapper = styled.div`
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  background-color: var(--bgColorBase);

  .search {
    width: 300px;
    padding: 5px 10px;
    display: flex;
    color: var(--fontColorBottom);
    justify-content: space-between;
    border: 1px solid var(--bgColorBase);
    border-radius: 15px;
    background-color: var(--bgColorTop);
    cursor: pointer;
    &:focus-within {
      border: 1px solid var(--fontColorBottom);
    }
    input {
      width: 90%;
      border: none;
      outline: none;
      color: var(--fontColorTop);
      background-color: var(--bgColorTop);
      &::placeholder {
        font-size: 13px;
      }
    }

    .icon {
      font-size: 18px;
      &:hover {
        color: #1890ff;
      }
    }
  }
`
